<template>
	<view class="my-loading">
		<view class="loading-screen">
				<!-- 动态背景效果 -->
				<view class="background-effects">
					<!-- 主背景渐变 -->
					<view class="bg-gradient-1"></view>
					<view class="bg-gradient-2"></view>
					<view class="bg-gradient-3"></view>
					
					<!-- 流动的粒子效果 -->
					<view class="particles-container">
						<view 
							v-for="i in 20" 
							:key="i" 
							class="particle"
							:style="{
								left: Math.random() * 100 + '%',
								top: Math.random() * 100 + '%',
								animationDelay: Math.random() * 3 + 's',
								animationDuration: (2 + Math.random() * 3) + 's'
							}"
						></view>
					</view>
					
					<!-- 旋转的光环 -->
					<view class="rotating-rings">
						<view class="ring ring-1"></view>
						<view class="ring ring-2"></view>
					</view>
				</view>
				
				<!-- 主内容区域 -->
				<view class="main-content">
					<!-- 核心系统图标 -->
					<view class="core-icon-container">
						<!-- 主图标容器 -->
						<view class="main-icon">
							<view class="icon-content">
								<text class="icon-text">🧠</text>
								<text class="icon-text atom">⚛️</text>
							</view>
						</view>
						
						<!-- 环绕的维度图标 -->
						<view class="dimension-icons">
							<view 
								v-for="(dimension, index) in lifeDimensions" 
								:key="index"
								class="dimension-icon"
								:class="{ active: index === dimensionIndex }"
								:style="getDimensionPosition(index)"
							>
								<text class="dimension-emoji">{{ dimension.emoji }}</text>
							</view>
						</view>
						
						<!-- 光晕效果 -->
						<view class="glow-effect"></view>
						
						<!-- 装饰星星 -->
						<text class="decoration-star star-1">⭐</text>
						<text class="decoration-star star-2">✨</text>
						<text class="decoration-star star-3">🌌</text>
					</view>
					
					<!-- 系统标题与理念 -->
					<view class="system-title">
						<view class="title-content">
							<text class="main-title">生命经营系统</text>
							<text class="subtitle">Life Management Operating System</text>
							<view class="title-divider"></view>
						</view>
						
						<!-- 当前维度展示 -->
						<view class="current-dimension">
							<view class="dimension-header">
								<view class="dimension-icon-small" :class="currentDimension.colorClass">
									<text class="dimension-emoji-small">{{ currentDimension.emoji }}</text>
								</view>
								<text class="dimension-label">{{ currentDimension.label }}</text>
							</view>
							<text class="dimension-description">{{ currentDimension.description }}</text>
						</view>
						
						<!-- 哲学理念 -->
						<view class="philosophy">
							<text class="philosophy-text">{{ currentPhaseData.philosophy }}</text>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-status">
						<view class="loading-text-container">
							<text class="loading-text">{{ loadingText }}</text>
							<view class="phase-indicator">
								<text class="phase-icon">⚡</text>
								<text class="phase-text">Phase {{ currentPhase + 1 }}/4</text>
							</view>
						</view>
						
						<!-- 进度条 -->
						<view class="progress-container">
							<view class="progress-bar">
								<view 
									class="progress-fill"
									:style="{ width: progress + '%' }"
								></view>
							</view>
							<view class="progress-labels">
								<text class="progress-label">启动</text>
								<text class="progress-percentage">{{ Math.round(progress) }}%</text>
								<text class="progress-label">就绪</text>
							</view>
						</view>
						
						<!-- 动态加载指示器 -->
						<view class="loading-indicators">
							<view 
								v-for="i in 5" 
								:key="i"
								class="indicator"
								:class="{ active: i - 1 === dimensionIndex }"
								:style="{ animationDelay: (i - 1) * 0.1 + 's' }"
							></view>
						</view>
					</view>
					
					<!-- 底部信息 -->
					<view class="bottom-info">
						<view class="version-info">
							<text class="version-icon">🌍</text>
							<text class="version-text">Version 4.0 • AI-Powered Life OS</text>
							<text class="version-icon">⚡</text>
						</view>
						<text class="description-text">
							基于人工智能的多维度生命管理系统，助力每个人实现价值增长与人生进化
						</text>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LoadingPage',
		data() {
			return {
				progress: 0,
				currentPhase: 0,
				loadingText: '唤醒生命意识...',
				dimensionIndex: 0,
				isLoadingComplete: false, // 防止重复跳转的标志
				
				// 生命五大维度
				lifeDimensions: [
					{ 
						emoji: '❤️', 
						label: '健康维度', 
						colorClass: 'health-dimension',
						description: '身心灵的和谐统一'
					},
					{ 
						emoji: '💰', 
						label: '财富维度', 
						colorClass: 'wealth-dimension',
						description: '财务自由与资产增值'
					},
					{ 
						emoji: '💼', 
						label: '事业维度', 
						colorClass: 'career-dimension',
						description: '职业发展与价值实现'
					},
					{ 
						emoji: '🎓', 
						label: '学习维度', 
						colorClass: 'learning-dimension',
						description: '知识积累与技能成长'
					},
					{ 
						emoji: '👥', 
						label: '关系维度', 
						colorClass: 'relationship-dimension',
						description: '人际网络与情感连接'
					}
				],
				
				// 多阶段加载文案
				loadingPhases: [
					{
						messages: [
							'唤醒生命意识...',
							'激活深层潜能...',
							'连接宇宙能量...'
						],
						philosophy: '生命是一场持续的经营与创造'
					},
					{
						messages: [
							'构建健康基石...',
							'布局财富蓝图...',
							'设计事业航线...'
						],
						philosophy: '每个维度都是价值增长的引擎'
					},
					{
						messages: [
							'点亮学习之光...',
							'编织关系网络...',
							'整合生命系统...'
						],
						philosophy: '全维度协同，成就非凡人生'
					},
					{
						messages: [
							'启动AI智能助手...',
							'加载个性化引擎...',
							'准备生命仪表盘...'
						],
						philosophy: '科技赋能，让生命经营更智慧'
					}
				]
			}
		},
		computed: {
			currentDimension() {
				return this.lifeDimensions[this.dimensionIndex]
			},
			currentPhaseData() {
				return this.loadingPhases[this.currentPhase] || this.loadingPhases[0]
			}
		},
		onLoad() {
			console.log('Loading页面加载')
			this.startLoadingAnimation()
		},
		methods: {
			getDimensionPosition(index) {
				const angle = (index * 72) + (this.progress * 2)
				const radius = 50
				const x = Math.cos((angle * Math.PI) / 180) * radius
				const y = Math.sin((angle * Math.PI) / 180) * radius
				return {
					transform: `translate(${x}rpx, ${y}rpx)`
				}
			},
			startLoadingAnimation() {
				console.log('开始loading动画')
				this.progress = 0
				this.currentPhase = 0
				this.dimensionIndex = 0
				this.loadingText = '唤醒生命意识...'
				
				const interval = setInterval(() => {
					this.progress += 0.6
					console.log('进度更新:', this.progress.toFixed(1) + '%')
					
					// 计算当前阶段
					const phaseIndex = Math.floor(this.progress / 25)
					if (phaseIndex !== this.currentPhase && phaseIndex < this.loadingPhases.length) {
						this.currentPhase = phaseIndex
						console.log('阶段切换:', phaseIndex)
					}
					
					// 更新加载文本
					if (phaseIndex < this.loadingPhases.length) {
						const phase = this.loadingPhases[phaseIndex]
						const messageIndex = Math.floor((this.progress % 25) / 8)
						if (messageIndex < phase.messages.length) {
							this.loadingText = phase.messages[messageIndex]
						}
					}
					
					// 更新维度索引
					const newDimensionIndex = Math.floor((this.progress / 20)) % this.lifeDimensions.length
					if (newDimensionIndex !== this.dimensionIndex) {
						this.dimensionIndex = newDimensionIndex
					}
					
					if (this.progress >= 100) {
						console.log('进度达到100%，准备完成')
						clearInterval(interval)
						setTimeout(() => {
							// 加载完成后根据情况跳转
							console.log('开始执行完成逻辑')
							this.handleLoadingComplete()
						}, 500)
					}
				}, 30)
			},
			
			// 处理加载完成后的跳转逻辑
			handleLoadingComplete() {
				// 防止重复执行
				if (this.isLoadingComplete) {
					console.log('已经完成，跳过重复执行')
					return
				}
				
				this.isLoadingComplete = true
				console.log('引导页完成，设置首次进入标记并跳转')
				
				// 设置首次进入标记为true（非首次进入）
				uni.setStorageSync('isFirstEnter', 'true')
				console.log('已设置isFirstEnter为true')
				
				// 检查是否有token
				const hasToken = this.checkToken()
				console.log('是否有token:', hasToken)
				
				// 根据token状态跳转
				if (hasToken) {
					// 有token，跳转到首页
					console.log('有token，跳转到首页')
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					// 没有token，跳转到登录页
					console.log('无token，跳转到登录页')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			
			// 从URL获取当前页面路径
			getCurrentPathFromUrl() {
				if (typeof window !== 'undefined' && window.location) {
					const hash = window.location.hash
					if (hash) {
						const path = hash.substring(1)
						return path
					}
				}
				return null
			},
			
			// 检查token是否存在
			checkToken() {
				const token = uni.getStorageSync('token')
				return token && token.trim() !== ''
			},
			
			// 检查页面是否需要登录
			needAuth(path) {
				const whiteList = [
					'/pages/login/login',
					'/pages/loading/loading'
				]
				return !whiteList.includes(path)
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 9999;
}
/* LoadingScreen 样式 */
.loading-screen {
	position: relative;
	width: 100%;
	height: 100vh;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.background-effects {
	position: absolute;
	inset: 0;
	
	.bg-gradient-1 {
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 30% 70%, rgba(124, 58, 237, 0.4), transparent 60%);
	}
	
	.bg-gradient-2 {
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.4), transparent 60%);
	}
	
	.bg-gradient-3 {
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.2), transparent 70%);
	}
}

.particles-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	
	.particle {
		position: absolute;
		width: 4rpx;
		height: 4rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		animation: particle-pulse 3s infinite;
	}
}

.rotating-rings {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.ring {
		position: absolute;
		border: 2rpx solid rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		
		&.ring-1 {
			width: 600rpx;
			height: 600rpx;
			animation: spin 20s linear infinite;
		}
		
		&.ring-2 {
			width: 480rpx;
			height: 480rpx;
			animation: spin 30s linear infinite reverse;
		}
	}
}

.main-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 120rpx;
	max-width: 600rpx;
	max-height: 100vh;
	margin: 0 auto;
	padding: 60rpx;
}

.core-icon-container {
	position: relative;
	
	.main-icon {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6);
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.3);
		animation: pulse-glow 2s ease-in-out infinite;
		
		.icon-content {
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.icon-text {
				font-size: 32rpx;
				animation: pulse 2s ease-in-out infinite;
				
				&.atom {
					font-size: 24rpx;
					animation: spin 3s linear infinite;
				}
			}
		}
	}
	
	.dimension-icons {
		position: absolute;
		inset: 0;
		width: 120rpx;
		height: 120rpx;
		
		.dimension-icon {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0.1);
			transform: scale(0.75);
			transition: all 0.5s ease;
			left: 50%;
			top: 50%;
			margin-left: -16rpx;
			margin-top: -16rpx;
			
			&.active {
				transform: scale(1.25);
				box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
			}
			
			.dimension-emoji {
				font-size: 16rpx;
			}
		}
	}
	
	.glow-effect {
		position: absolute;
		inset: 0;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
		border-radius: 48rpx;
		animation: ping 2s ease-in-out infinite;
	}
	
	.decoration-star {
		position: absolute;
		font-size: 24rpx;
		animation: pulse 2s ease-in-out infinite;
		
		&.star-1 {
			top: -32rpx;
			right: -32rpx;
			color: #fbbf24;
		}
		
		&.star-2 {
			bottom: -32rpx;
			left: -32rpx;
			color: #60a5fa;
			animation-delay: 1s;
		}
		
		&.star-3 {
			top: -48rpx;
			left: -48rpx;
			color: #a78bfa;
			animation-delay: 2s;
		}
	}
}

.system-title {
	text-align: center;
	gap: 60rpx;
	display: flex;
	flex-direction: column;
	
	.title-content {
		gap: 30rpx;
		display: flex;
		flex-direction: column;
		
		.main-title {
			font-size: 60rpx;
			font-weight: bold;
			color: #ffffff;
			background: linear-gradient(135deg, #a78bfa, #f472b6, #22d3ee);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 20rpx;
		}
		
		.subtitle {
			color: rgba(255, 255, 255, 0.7);
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
		
		.title-divider {
			height: 2rpx;
			width: 128rpx;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			margin: 0 auto;
		}
	}
}

.current-dimension {
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20rpx);
	border-radius: 32rpx;
	padding: 40rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	
	.dimension-header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24rpx;
		margin-bottom: 16rpx;
		
		.dimension-icon-small {
			width: 24rpx;
			height: 24rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
			
			&.health-dimension {
				background: linear-gradient(135deg, #ef4444, #ec4899);
			}
			
			&.wealth-dimension {
				background: linear-gradient(135deg, #10b981, #059669);
			}
			
			&.career-dimension {
				background: linear-gradient(135deg, #3b82f6, #06b6d4);
			}
			
			&.learning-dimension {
				background: linear-gradient(135deg, #8b5cf6, #6366f1);
			}
			
			&.relationship-dimension {
				background: linear-gradient(135deg, #f97316, #eab308);
			}
			
			.dimension-emoji-small {
				font-size: 12rpx;
			}
		}
		
		.dimension-label {
			color: #ffffff;
			font-weight: 500;
		}
	}
	
	.dimension-description {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}
}

.philosophy {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(20rpx);
	border-radius: 32rpx;
	padding: 40rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	
	.philosophy-text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 28rpx;
		font-style: italic;
		line-height: 1.6;
	}
}

.loading-status {
	text-align: center;
	gap: 60rpx;
	display: flex;
	flex-direction: column;
	width: 100%;
	
	.loading-text-container {
		gap: 16rpx;
		display: flex;
		flex-direction: column;
		
		.loading-text {
			color: rgba(255, 255, 255, 0.9);
			font-size: 32rpx;
			font-weight: 500;
			animation: pulse 2s ease-in-out infinite;
		}
		
		.phase-indicator {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			
			.phase-icon {
				font-size: 16rpx;
				color: #06b6d4;
				animation: pulse 2s ease-in-out infinite;
			}
			
			.phase-text {
				color: rgba(255, 255, 255, 0.6);
				font-size: 24rpx;
			}
		}
	}
}

.progress-container {
	width: 100%;
	max-width: 600rpx;
	margin: 0 auto;
	gap: 24rpx;
	display: flex;
	flex-direction: column;
	
	.progress-bar {
		width: 100%;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 8rpx;
		height: 16rpx;
		overflow: hidden;
		backdrop-filter: blur(20rpx);
		
		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #8b5cf6, #f472b6, #22d3ee);
			transition: width 0.3s ease-out;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
		}
	}
	
	.progress-labels {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.5);
		
		.progress-percentage {
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.loading-indicators {
	display: flex;
	justify-content: center;
	gap: 16rpx;
	
	.indicator {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
		transform: scale(1);
		
		&.active {
			transform: scale(1.5);
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
		}
	}
}

.bottom-info {
	text-align: center;
	gap: 24rpx;
	display: flex;
	flex-direction: column;
	
	.version-info {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
		color: rgba(255, 255, 255, 0.4);
		font-size: 24rpx;
		
		.version-icon {
			font-size: 12rpx;
		}
	}
	
	.description-text {
		color: rgba(255, 255, 255, 0.3);
		font-size: 24rpx;
		max-width: 600rpx;
		line-height: 1.6;
	}
}

/* 动画定义 */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes pulse-glow {
	0%, 100% { 
		box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.3);
	}
	50% { 
		box-shadow: 0 32rpx 64rpx rgba(139, 92, 246, 0.4);
	}
}

@keyframes ping {
	0% { 
		transform: scale(1);
		opacity: 1;
	}
	50% { 
		transform: scale(1.1);
		opacity: 0.5;
	}
	100% { 
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes particle-pulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.8; }
}
</style> 